<!DOCTYPE html>
<html lang="en">
   <head>
      <title>CanvasMark 2013 - HTML5 Canvas 2D Rendering and JavaScript Benchmark</title>
      <script src="../../scripts/Profiler.js"></script>
      <script src="scripts/mathlib-min.js"></script>
      <script src="scripts/k3d-min.js"></script>
      <script src="scripts/canvasmark_v6.js"></script>
      <script async defer src="scripts/jquery-1.4.2.min.js"></script>
      <style type="text/css">
@font-face
{
	font-family: HelveticaNeue;
	src: url('HelveticaNeueLTStd-Lt.otf');
}
@font-face
{
	font-family: HelveticaNeueBold;
	src: url('HelveticaNeueLTStd-Md.otf');
}
@font-face
{
	font-family: OstrichSans;
	src: url('ostrich-black-webfont.woff');
}
body
{
   background-color: #aaa;
   font-family: HelveticaNeue, Helvetica;
   color: #333;
}
.title
{
   font-family: OstrichSans, Helvetica;
   padding-left: 20px;
   padding-top: 6px;
   color: #000;
   font-size: 1.75em;
}
P
{
   font-size: 1em;
   padding-left: 20px;
   padding-top: 0;
   padding-bottom: 0;
   line-height: 1.5em;
}
P.left
{
   padding-left: 2em;
}
a, a:visited, a:active, a:hover
{
   color: #225588;
   text-decoration: none;
}
a:hover
{
   text-decoration: underline;
}

.box-shadow
{
   box-shadow: 0px 3px 16px #222;
}

.wrapper
{
   padding-top: 12px;
   text-align: center;
}

.info
{
   display: inline-block;
   margin-left: 1.5em;
   text-align: left;
   vertical-align: top;
}

.infopanel
{
   background-color: #F0F0FF;
   display: inline-block;
   line-height: 2em;
   padding: 1.5em;
   width: 28em;
}

canvas
{
   border: 1px solid #333;
   background-color: #000;
}

.results
{
}

.results-wrapper
{
   display: none;
   border: 1px solid #aaa;
   background-color: #ddd;
   margin-left: 1em;
}

.prose
{
   font-family: HelveticaNeueBold, Helvetica;
   font-size: 0.85em;
   line-height: 1.4em;
}

.footer
{
   margin-top: 16px;
   text-align: center;
}

.small
{
   background-color: #eee;
   display: inline-block;
   font-family: HelveticaNeueBold, Helvetica;
   font-size: 0.85em;
   padding: 6px 12px;
   text-align: center;
}

.button-overlay
{
   position: absolute;
   right: 1em;
   bottom: 1em;
}

.toggle-area
{
   display: none;
}

a.toggler,
a.toggler:visited,
a.toggler:hover,
a.toggler:active
{
   text-decoration: none !important;
}
      </style>
      <meta name="description" content="CanvasMark - HTML5 Canvas 2D Rendering and JavaScript Benchmark by Kevin Roast" />
   </head>
   
   <body>
      <div class="button-overlay">
         <!-- AddThis Button BEGIN -->
         <div class="addthis_toolbox addthis_default_style addthis_32x32_style">
         <a class="addthis_button_preferred_1"></a>
         <a class="addthis_button_preferred_2"></a>
         <a class="addthis_button_compact"></a>
         <a class="addthis_counter addthis_bubble_style"></a>
         </div>
         <!-- AddThis Button END -->
      </div>
      <div class="wrapper">
         <canvas class="box-shadow" id="canvas" width="640" height="640"></canvas>
         <div class="info">
            <div class="infopanel">
               <div class="title">CanvasMark 2013 - HTML5 Canvas 2D Rendering and JavaScript Benchmark</div>
               <div>
                  <p>Tests the HTML5 &lt;canvas&gt; rendering performance for commonly used operations in HTML5 games: bitmaps, canvas drawing, alpha blending, polygon fills, shadows and text functions.</p>
               </div>
               <div id="results-wrapper" class="results-wrapper">
                  <div class="results" id="results"></div>
                  <div class="results"><p><a id="tweetlink" href="#" target="new">Tweet this result.</a></p></div>
               </div>
               <div>
                  <p>Run benchmark using HTML5 compatible browser: <a href="http://www.google.co.uk/chrome" target="new">Chrome</a> | <a href="http://www.mozilla.com/firefox" target="new">FireFox</a> | <a href="http://www.apple.com/safari/download" target="new">Safari</a> | <a href="http://www.opera.com/download" target="new">Opera</a> | <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home" target="new">IE9/10</a>.</p>
               </div>
               <div>
                  <p>This benchmark suite uses a number of elements from my HTML5 games including <a href="../asteroids">Asteroids</a> and <a href="../arena5">Arena5</a>. See more <a href="../index.html">HTML5 Canvas experiments</a>.</p>
               </div>
               <div>
                  <p class="prose">Important notes for Windows + Chrome users! <a class="toggler" title="More..." href="#" onclick="$('#toggle-1').toggle();return false;">[+]</a>
                  <span id="toggle-1" class="toggle-area"><br>To get the best benchmark score for your machine, it is advisable to Disable VSync. Go to &quot;about:flags&quot; and toggle: <code>Disable GPU VSync &quot;Disables synchronisation with the display's vertical refresh rate when GPU rendering.&quot;</code> This will resolve the issue with the Chrome implementation of &quot;requestAnimationFrame()&quot; that tries to maintain a steady 60 frames-per-second (FPS) but on Windows with accelerated 2D canvas support, it will drop immediately down to 30 FPS when 60 FPS is not achievable with no gradual degredation. On Mac/Linux the drop in FPS is gradual and therefore does not affect the benchmark. So if you see the FPS counter drop directly from around 60 FPS to 30 FPS then you should do this. This will not produce an &quot;unfair&quot; score as scores are based on time not the number of frames generated.</span>
                  </p>
               </div>
               <div>
                  <p class="prose">How to interpret the results <a class="toggler" title="More..." href="#" onclick="$('#toggle-2').toggle();return false;">[+]</a>
                     <span id="toggle-2" class="toggle-area"><br>CanvasMark gives a score for the browser based on the combined performance in each of the various stress tests. You should ensure the browser window is not minimized and that no other CPU or GPU intensive processes are running during the test. The results can only be compared to other browsers running on the same machine - as each machine with different CPU or graphics will produce difference results.</span>
                  </p>
               </div>
               <div>
                  <p class="prose">How does it work <a class="toggler" title="More..." href="#" onclick="$('#toggle-3').toggle();return false;">[+]</a>
                     <span id="toggle-3" class="toggle-area"><br>Each test is run and progressively tuned to stress the browser until a steady 30 frames-per-second (FPS) is reached. More objects are added to the scene or the scene is made more complex to render until that point is reached. Then the test is considered completed and the next test is started. The score is based on the length of time the browser was able to maintain the test scene at greater than 30 FPS, multiplied by a weighting for the complexity of each test type.</span>
                  </p>
               </div>
               <div>
                  <p class="prose">Benchmark version 1.1 [25-03-2013]</p>
               </div>
            </div>
         </div>
      </div>
      <div class="footer">
         <div class="small">Follow CanvasMark <a href="http://twitter.com/canvasbench" target="new">on Twitter</a> or just <a href="http://twitter.com/home/?status=CanvasMark%20-%20HTML5%20Canvas%20performance%20and%20benchmarking%20tool:%20http://bit.ly/canvasmark%20%23javascript%20%23html5%20(@canvasbench)" target="new">Tweet this.</a> Last updated: 25th March 2013 by Kevin Roast</div>
      </div>
   </body>
</html>
